// 导入：类型、接口、模块、组件、样式
import { Component } from "react";

interface Props {}
interface State {}
class Index extends Component<Props, State> {
  state = {
    inputValue: "数据1",
    textareaValue: "数据2",
    selectValue: "2",
  };

  onUpdateInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({
      inputValue: e.target.value,
    });
  };

  onUpdateTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    this.setState({
      textareaValue: e.target.value,
    });
  };

  onUpdateSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
    this.setState({
      selectValue: e.target.value,
    });
  };

  render() {
    return (
      <fieldset>
        <legend>13-受控组件</legend>

        <h1>input</h1>
        <input
          type="text"
          value={this.state.inputValue}
          onChange={this.onUpdateInput}
        />
        <h1>textarea</h1>
        <textarea
          name=""
          value={this.state.textareaValue}
          onChange={this.onUpdateTextarea}
        ></textarea>
        <h1>select</h1>
        <select
          name=""
          id=""
          value={this.state.selectValue}
          onChange={this.onUpdateSelect}
        >
          <option value="1">中国</option>
          <option value="2">北京</option>
          <option value="3">上海</option>
          <option value="4">中国台湾 🥚</option>
        </select>
      </fieldset>
    );
  }
}
export default Index;
